<template>
  <n-grid ref="progressGridRef" v-if="props.schedule.scheduleOperatingFlag">
    <n-grid-item :span="24">
      <n-space justify="space-around">
        <n-statistic label="当前进度" :value="props.schedule.currentTaskNum">
          <template #prefix>
          </template>
          <template #suffix>
            / {{ props.schedule.taskStatus.totalNum }}
          </template>
        </n-statistic>
        <n-statistic label="成功/失败">
          <template #prefix>
            {{ props.schedule.taskStatus.successNum }}
          </template>
          <template #suffix>
            /
            <n-gradient-text type="error">{{ props.schedule.taskStatus.failNum }}</n-gradient-text>
          </template>
        </n-statistic>
      </n-space>
    </n-grid-item>
    <n-grid-item :span="24">
      <n-progress
          type="line"
          :percentage=" Math.round((props.schedule.currentTaskNum/props.schedule.taskStatus.totalNum) * 100) "
          :height="30"
          :border-radius="5"
          :fill-border-radius="0"
          :indicator-placement="'inside'"
          :processing="props.schedule.scheduleOperatingFlag"
      />
    </n-grid-item>
  </n-grid>
</template>

<script setup lang="ts">
const props = defineProps({
  schedule: {
    type: Object,
    required: true,
    default: () => {
      return {
        scheduleOperatingFlag: false,
        currentTaskNum: 0,
        taskStatus: {
          successNum: 0,
          failNum: 0,
          totalNum: 0
        }
      }
    }
  }
})
</script>
